<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
 // 创建函数式组件
 function MyComponent(){
     console.log(this)//这里的this是undefined,因为babel开启严格模式，不允许this指向window
     return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2>
 }

 // 渲染组件到页面
 ReactDOM.render(<MyComponent/>,document.getElementById("container"))


//执行ReactDOM.render(<MyComponent/>,document.getElementById("container"))之后发生了什么？
// 1.React解析组件标签，找到了MyComponent组件
// 2.找到MyComponent之后,发现是函数式组件,随后调用该函数,将返回的虚拟DOM转化为真实DOM.随后呈现到页面中
</script>